// 导航条
$(document).on('scroll', function () {
    if ($(this).scrollTop() > $('.bg').height() - 100) {
        $('header').css({
            'padding': '10px 15px',
            'background': 'rgba(255, 255, 255,.8)'
        })
    } else {
        $('header').css({
            'padding': '25px 15px',
            'background': 'rgba(255, 255, 255)'
        })
    }
})


$('.add_to_bookmark').on('click', () => {
    alert('请按 Ctrl+D 收藏')
})


// 点击实现向下滑动到指定位置
$('.scroll_down').on('click', () => {
    $('html').animate({
        scrollTop: $('main').offset().top
    }, 500);
});


// 用户信息
$.get('/admin', data => {
    $('.photo>img').attr('src', data[0].photo);
    $('#nickname').html(data[0].name);
    $('.user .user_state').html(data[0].user_state);
    $(".tag_length_num").html(data[data.length - 1])
});


// 文章渲染 (请求blogs数据表)
new Promise((resolve, rejects) => {
    $.get('/abstract', res => {
        $(".article_length_num").html(res.length);
        $("tag_length_num").html(res.length);
        const arr = []
        res.forEach((item, i) => {
            if (!arr.includes(item.publishTime.substr(0, 7))) arr.push(item.publishTime.substr(0, 7));

            if (i % 2 == 0) {
                $('article').append(articleElement(item.id, item.title, item.abstract, item.publishTime, item.bgUrl, 'fl', 'fr'))
            } else {
                $('article').append(articleElement(item.id, item.title, item.abstract, item.publishTime, item.bgUrl, 'fr', 'fl'))
            }
        });

        arr.forEach((item, i) => {
            if (i < 5) $(".card_archives>ul").append(`<li><a href="./archivesDate.html?date=${item}">${item}</a></li>`)
        })
        resolve()
    });
}).then(() => {
    // 请求tags数据表，获取tag数据
    $.get("/abstract_tags", (result) => {
        const arr = []
        result.forEach(item => {
            $("#" + item.BLOGID).parent().siblings('.article_info').children('.item_tags').append(`<span><i></i><a href="javascript:;" class="info_tag">${item.tag}</a></span>`)
            if (!arr.includes(item.tag)) {
                arr.push(item.tag)
            }
        })
        const fontStyleArr = ['Serif', 'Sans-serif', 'Monospace', 'Cursive', 'Fantasy']
        arr.forEach(item => {
            const a = $(`<a href="./tag.html?tag=${item}">${item}</a>`)
            a.css({
                color: randomColor(),
                fontSize: randomNumber(20, 28),
                fontFamily: fontStyleArr[randomNumber(0, fontStyleArr.length - 1)]
            })
            $(".card_tag").append(a);
        })
    })
})



// 文章元素
function articleElement(id, title, abstract, release_time, img_url, float_img, float_artContent) {
    // 参数解释
    // id定位a标签，
    // title标题内容，
    // abstract摘要内容，
    // release_time发布时间，
    // tags文章标签，
    // float_img图片浮动方向，
    // float_artContent文章内容浮动方向
    return `
            <div class="item clearfix">
                    <div class="img ${float_img}">
                        <a href="./details.html?id=${id}" id=${id} class="articles_title">
                            <img src="${img_url}" alt="">
                        </a>
                    </div>
                    <div class="article_content ${float_artContent}">
                        <h3><a href="./details.html?id=${id}" id=${id} class="articles_title">${title}</a></h3>
                        <div class="article_info">
                            <spen class="release_time"><i></i>${release_time}</spen>
                            <span class="dividing_line">|</span>
                            <span class="item_tags"></span>
                        </div>
                        <div class="content">${abstract}</div>
                    </div>
                </div>
            `
}


function randomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

function randomColor() {
    return `rgba(${randomNumber(0, 255)},${randomNumber(0, 255)},${randomNumber(0, 255)})`
}